<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<!--CSS file (default YUI Sam Skin) -->




<title>Progress Bar animation freeze test</title>
<!-- css -->
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../build/base/base.css">
<link rel="stylesheet" type="text/css" href="../../build/progressbar/assets/skins/sam/progressbar.css">

<link rel="stylesheet" type="text/css" href="http://developer.yahoo.com/yui/assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/skins/sam/logger.css">

<!-- js -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-debug.js"></script>
<script type="text/javascript" src="../../build/element/element-min.js"></script>

<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../../build/logger/logger-min.js"></script>


<script type="text/javascript" src="../../build/progressbar/progressbar-debug.js"></script>

<style type="text/css">


/* Here I am using the className of each bar to set the masks and/or bar images for each one separately */

#vumeter {
	padding:3px;
	margin:10px;
	border: medium ridge silver;
	float:left;
}

#vumeter .yui-pb {
	float:left;
	margin:3px;
}

#vumeter .yui-pb-bar  {
	background-image: url(vumeter.png);
}

/* Just a little decoration for the page, not relevant to the usage of the progress bar */
hr {
	margin:1em 0;
	clear:both;
}

.bd {
	margin:3em 0;
	padding: 1em 0;
	border-top: solid silver;
	border-bottom: solid silver;
}
pre, code {
	background-color:#e0e0e0;
	border:thin solid #c0c0c0;
	white-space:pre;
	font-size:10px;
}
.selector {
	white-space:nowrap;
	font-family:monospace;
}

.dp-highlighter th, .dp-highlighter td {
	border:0;
	padding:0;
}
.dp-highlighter .line1, .dp-highlighter  .line2 {
	padding-left:10px;
	white-space:nowrap;
}

</style>
</head>
<body class="yui-skin-sam">

	<div id="doc">
		<div id="hd">
			<h1>Progress Bar</h1>
		</div>
		<div id="bd">
			<p>Progress bars don't need to be static either.  They certainly cannot replace the Chart utility
			but you can do some decent graphics with them, even animated ones.</p>
			<div id="vumeter" ></div>
			<p>Here we draw a set of several Progress Bars moving from bottom to top, with the background image for the bar
			set to an image of the bar fully extended, which will be uncovered depending on the value of the bar.
			We are using the Bezier utility to make neighboring bars move in a more coordinated way than
			just assigning them random values.  We calculate 4 random control points for the bars, no matter
			how many bars there are.  The Bezier function will interpolate intermediate values for the bars.
			On completion of one animation, we set new control points at random, calculate the new values and 
			get them moving again.</p>
			<textarea name="code" class="JScript" cols="60" rows="1">
				var pbvu = [],i,NUM_BARS= 8;
				for (i = 0; i < NUM_BARS;i++) {
					pbvu[i] = new YAHOO.widget.ProgressBar({direction:'btt',width:20,height:80,anim:true,duration:0.3}).render('vumeter');
				}
				var redrawVUs = function() {
					var points = [],i;
					for (i=0;i<4;i++) {
						points[i] = [i,Math.random() * 100];
					}
					for (i = 0;i < NUM_BARS;i++) {
						pbvu[i].set('value',YAHOO.util.Bezier.getPosition(points,i/(NUM_BARS-1))[1]);
					}
				};
					
				pbvu[NUM_BARS -1].on('complete',redrawVUs);
				redrawVUs();
			</textarea>
			<hr/>
			
		</div>
		<div id="ft">
		</div>
	</div>
	
<script  type="text/javascript">
	var Dom = YAHOO.util.Dom, 
		Event = YAHOO.util.Event,
		pb,pbplain,pbg,pbr,pbcopper,pbthin;

	YAHOO.util.Event.onAvailable('vumeter', function () {
	
		var myLogReader = new YAHOO.widget.LogReader(); 
		
		var pbvu = [],i,NUM_BARS= 8, hold = false;
		for (i = 0; i < NUM_BARS;i++) {
			pbvu[i] = new YAHOO.widget.ProgressBar({direction:'btt',width:20,height:80,anim:true,duration:0.3,id:'a' + i}).render('vumeter');
		}
		var redrawVUs = function() {
			var points = [],i;
			for (i=0;i<4;i++) {
				points[i] = [i,Math.random() * 100];
			}
			for (i = 0;i < NUM_BARS;i++) {
				var newValue = Math.floor(YAHOO.util.Bezier.getPosition(points,i/(NUM_BARS-1))[1]);
				YAHOO.log('Bar: ' + i + ' set to ' + newValue);
				if (i === hold) {
					debugger;
					var anim = pbvu[i].get('anim');
					if (anim.isAnimated()) { 
						anim.stop(true); 
						anim._onComplete.fire();
						hold = false;
					}
				}
				pbvu[i].set('value',newValue);
			}
		};
		//window.setInterval(redrawVUs,350);	
		pbvu[NUM_BARS -1].on('complete',redrawVUs);
		redrawVUs();
		Event.on('vumeter','click',function (ev) {
			var el = Event.getTarget(ev);
			el = Dom.getAncestorByClassName(el,YAHOO.widget.ProgressBar.CLASS_PROGBAR);
			hold = parseInt(el.id.substr(1),10);
		});
	});
</script>
<script type="text/javascript" src="http://developer.yahoo.com/yui/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript" language="javascript">dp.SyntaxHighlighter.HighlightAll('code');</script>
</body>
</html>
	
